
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台>通知中心</div>
          <div class="hei10"></div>
				<div class="team">
					<div class="powertop">
						<router-link class="powertopli powertopact" to="/tongzhizhongxin">通知中心</router-link>
						<router-link class="powertopli " to="/fabutongzhi">发布通知</router-link>
<!-- 						<router-link class="powertopli" to="/fabuxitongtongzhi" v-if="shopid == 50481 || shopid == 304676">发布系统更新</router-link>
						<router-link class="powertopli" to="/xitongtongzhi">系统更新</router-link> -->
					</div>
				</div>
				<div class="cons" v-loading="loading">
					<el-collapse accordion  @change="handleChange" >
						<el-collapse-item v-for="item in list" :key="item.nu_id" :name="item.nu_id" v-bind:class="[item.status == 1 ? 'act' : 'no']">
							<template slot="title">
								<div :class="item.is_yidu == 2?'td huise':'td'" style="flex: 6;">
									<i v-if="item.is_yidu == 1 && item.type == 2" class="el-icon-warning" style=" font-size: 16px; color:#FF5353;"></i>
									<i v-if="item.is_yidu == 2 && item.type == 2" class="el-icon-warning" style=" font-size: 16px; color:#999;"></i>
									<span v-if="item.type == 4">【商品上下架通知】</span>
									<span v-if="item.type == 5">【商品上下架通知】</span>
									<span v-if="item.type == 1">【重要公告】</span>
									<span v-if="item.type == 2">【消息】</span>
									<span v-if="item.type == 3 || item.type == 8">【系统更新】</span>
									<span>{{item.title}}</span>
								</div>
                <div class="td" style="flex: 1;">{{item.nu_time}}</div>
								<div class="td" style="flex: 1;">来源:{{item.name}}</div>
							</template>
							<div v-if="item.content == ''" v-html="item.title"></div>
							<div v-if="item.content != ''" v-html="item.content"></div>
							<div style="cursor: pointer; color: #409EFF;" v-if="item.file != '' && item.file != null" @click="down(item.file)">
								下载附件
							</div>


						</el-collapse-item>
					</el-collapse>
					<!--                    <div class="list" v-for="item in list" :key="item.id" v-bind:class="[item.status == 1 ? 'act' : 'no']" style="justify-content: space-between;">
                    	<div class="td" style="flex: 6;"><i class="el-icon-warning"></i>重要公告】消息内容消息内容消息内容</div>
                        <div class="td" style="flex: 1;">{{item.created_at}}</div>
                    	<div class="td" ><el-button type="primary" size="mini">已读</el-button></div>
                    </div> -->
					<el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="fanye" :page-size="pagesize"
					 :total="total"></el-pagination>
				</div>



			</div>
		</div>
		<!-- <foot></foot> -->
	</div>
</template>

<script>
	import bus from '@/assets/bus.js'
	import axios from "axios";
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
	export default {
		components: {
			"left": left,
			"top": top,
			'foot': foot
		},
		name: 'fabutongzhi',
		data() {
			return {
				list: {},
				total: 0,
				pagesize: 20,
				page: 1,
				loading: true,
				shopid:""
			}
		},
		created() {
			this.getlist()
			var that = this
			bus.$on('shopid',(res)=>{
			  this.shopid = res
			})
		},
		methods: {
			down:function(url){
				const a = document.createElement('a');
				a.setAttribute('download',"");
				a.setAttribute('href', url);
				a.click();
			},
			handleChange:function(e){
				axios.post('/api/sys/notice/set/read',{id:e})
					.then(response => {
						if (response.data.msg.code == 0) {
							this.getlist()
						} else {
							this.$message.error(response.data.msg.info);
						}
					})
			},
			getlist: function() {
				this.danxuans = [];
				this.quanxuana = false
				var that = this
				axios.get('/api/system/notice/center?page=' + this.page + '&page_size=' + this.pagesize)
					.then(response => {
						if (response.data.msg.code == 0) {
							that.list = response.data.data.data
							that.total = response.data.data.total
							that.loading = false
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			//翻页
			fanye: function(page) {
				this.loading = true
				this.page = page
				this.getlist()
			},
			status: function(id) {
				var that = this
				axios.post('/api/system/message/status', {
						status: 2,
						id: id
					})
					.then(response => {
						if (response.data.msg.code == 0) {
							that.$message({
								message: '修改状态成功！',
								type: 'success'
							});
							that.getlist()
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {

    /deep/ .el-collapse-item__header{ height: auto;}
		.cons{
			/deep/ .el-collapse-item__content{ background: #f1f1f1; padding:10px 20px;}
		}
		.huise{ color:#999;}


		.team {
			background: #F9F9F9;
		}

		.powertop {
			display: flex;
			width: 640px;
		}

		.powertopli {
			flex-basis: 160px;
			line-height: 45px;
			border-top: 4px #F9F9F9 solid;
			color: #727272;
			border-right: 1px #EAEAEA solid;
			font-size: 14px;
			text-align: center;
		}

		.powertopact {
			background: #FFFFFF;
			border-top: 4px #DD2727 solid;
		}

		.piliang {}

		.piliangxuan {
			padding: 3px 0;
		}

		.mesquanxuan {
			padding: 10px 30px 20px 0px;
			display: flex;
			font-size: 14px;
			background: #EFEFEF
		}

		.cons {

			margin: 20px;
			padding: 0 20px;

			/deep/ .el-pagination {
				text-align: right;
				margin: 20px 0
			}

			.act {
				color: #000;

				/deep/ .el-icon-message-solid {
					color: #EEF7FF
				}
			}

			.no {
				color: #999;
			}
		}

	}
</style>
